@extends('WShop::layout')
@section('content')
    @include('WShop::public.header')
    @component('WShop::public.header')
        @slot('page_title'){{$page_title}} @endslot
    @endcomponent
    <div class="mui-content mui-scroll-wrapper" id="pullrefresh">
        <div class="mui-scroll">
            <div class="mui-table-view mui-table-view-chevron mui-dingdan mui-bottom">
                <div class=" mui-fenlei bg-fff ">
                    <div class=" mui-text-center flex ">
                        <div data-url="{{route('f_Wap_Upgrade_handle_record')}}" class="flex-item  {{$status===false?'swiper-slide-actives':''}}">全部</div>
                        <div data-url="{{route('f_Wap_Upgrade_handle_record',['status'=>0])}}" class="flex-item {{$status===0?'swiper-slide-actives':''}}">待付款</div>
                        <div data-url="{{route('f_Wap_Upgrade_handle_record',['status'=>1])}}" class="flex-item {{$status==1?'swiper-slide-actives':''}}">已打款</div>
                        <div data-url="{{route('f_Wap_Upgrade_handle_record',['status'=>2])}}" class="flex-item {{$status==2?'swiper-slide-actives':''}}">已审核</div>
                        <div data-url="{{route('f_Wap_Upgrade_handle_record',['status'=>3])}}" class="flex-item {{$status==3?'swiper-slide-actives':''}}">已拒绝</div>

                    </div>
                </div>

                <div class="mui-zhuda">

                    <div class="mui-dingdan-list">
                        @if($list->isNotEmpty())
                            <ul class="mui-list-unstyled mui-clearfix" id="pull-load">
                                @foreach($list as $item)
                                    <li class="bg-fff">
                                        <div class="dingdan-list-header">订单编号：{{$item->agent_sn}} <span class="fa fa-angle-right"></span>
                                            @switch($item->status)
                                            @case(0)
                                             <span class="mui-pull-right mui-text-red">待打款</span>
                                            @break
                                            @case(1)
                                              <span class="mui-pull-right mui-text-red">已打款</span>
                                            @break
                                            @case(2)
                                            <span class="mui-pull-right mui-text-blue">已审核</span>
                                            @break
                                            @case(3)
                                            <span class="mui-pull-right mui-text-green">已拒绝</span>
                                            @break
                                            @default
                                            <span class="mui-pull-right mui-text-green">未打款</span>
                                            @endswitch
                                        </div>

                                        <div class="flex">
                                            <img src="{{$item->ApplyUserInfo['receiving_code']}}" alt="" />
                                            <div class="flex-right" style="width: 100%;">
                                                <div class="flex">
                                                    <div class="mui-ellipsis-2">打款人：{{$item->ApplyUser['real_name']}}</div>
                                                </div>
                                                <div>
                                                    <div style="padding-left: 10px;color: #999;">打款人微信：{{$item->ApplyUserInfo['weichat']}}</div>
                                                    <div style="padding-left: 10px;color: #999;">打款人电话：{{$item->ApplyUser['user_phone']}}</div>
                                                    <div style="padding-left: 10px"><span style="margin-right: 50px;">￥{{$item->pay_money}}</span></div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="mui-text-right"></div>
                                        @switch($item->status)
                                        @case(0)
                                        <div class="mui-text-right1">
                                            @if($item->user_id == $user_id)
                                                <a href="{{route('f_Wap_Upgrade_apply_match_pay',['order_id'=>$item->id])}}" class="mui-btn">立即付款</a>
                                            @else
                                                <a href="javascript:void (0)" class="mui-btn mui-disabled">未付款</a>
                                            @endif
                                        </div>
                                        @break
                                        @case(1)

                                        <div class="mui-text-right1">
                                            @if($item->hand_uid == $user_id)

                                            <a href="javascript:;"
                                               data-url="{{route('f_Wap_Upgrade_handle',['order_id'=>$item->id,'status'=>2])}}"
                                               class="mui-btn quxiao" style="background-color: green;color: #ffffff;">通过</a>

                                            <a href="javascript:;"
                                               data-url="{{route('f_Wap_Upgrade_handle',['order_id'=>$item->id,'status'=>3])}}"
                                               class="mui-btn quxiao">拒绝</a>

                                            @else
                                                <a href="javascript:void (0)" class="mui-btn quxiao mui-disabled">已付款</a>
                                            @endif

                                            <a href="javascript:;" data-content="{{$item->remark}}" data-img="{{$item->voucher}}" class="mui-btn tixing">收款凭证</a>
                                        </div>

                                        @break
                                        @case(2)
                                        <a href="javascript:;" data-content="{{$item->remark}}" data-img="{{$item->voucher}}" class="mui-btn tixing">收款凭证</a>
                                        @break
                                        @endswitch

                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    </div>

                </div>

            </div>
        </div>
    </div>
    @include('WShop::public.foot_bar',['active'=>'upgrade'])
@endsection
@push('scripts')
    <script>
        var btn=$('.mui-fenlei .flex-item')
        for (var i=0;i<btn.length;i++){
            btn[i].addEventListener('tap',function(){
                window.location.href =  $(this).data('url');
            })
        }
        orderOpt();
        function orderOpt() {

            $('.tixing').each(function () {
                this.addEventListener('tap',function () {
                    var content = "&nbsp;&nbsp;&nbsp;&nbsp;"+$(this).data('content');
                    var img_src = $(this).data('img');
                    var html = "<div style='margin:0 auto;'><img style='width: 150px;height: 150px;' src="+img_src+" ></div>\n"+
                        "<div style='margin-top: 10px;'>"+content+"</div>"
                    layer.open({
                        title: [
                            '查看凭证',
                            'background-color: #1b2c4b; color:#fff;'
                        ],
                        content: html
                    });
                });
            });

            $('.quxiao').each(function () {
                this.addEventListener('tap',function () {


                    var url = $(this).data('url');

                    mui.confirm('确认审核订单？','',function(e){
                        if(e.index==1){
                            var load =  layer.open({type: 2});
                            $.ajax({
                                type: 'get',
                                url: url,
                            }).done(function (response) {
                                if(response.status){
                                    tooltips(response.msg,6);
                                    setTimeout(function () {
                                        location.href = response.url;
                                    }, 2000);
                                }else{
                                    tooltips(response.msg,5);
                                }
                            }).fail(function (XMLHttpRequest) {
                                if (XMLHttpRequest.status == 422) {
                                    var errors = XMLHttpRequest.responseJSON.errors;
                                    if(typeof errors == 'object') {
                                        for (var index in errors) { // 不推荐这样
                                            tooltips(errors[index][0]);
                                            break;
                                        }
                                    }else{
                                        tooltips(XMLHttpRequest.responseJSON.msg);

                                    }
                                }else{
                                    tooltips('网络异常,请检查连接');
                                }

                            }).always(function () {
                                layer.close(load);
                            });

                            function tooltips(msg) {
                                mui.toast(msg);
                            }
                        }
                    })
                });
            });

        }

    </script>
    <script src="{{asset(config('view.plugin').'/other/day.js')}}"></script>
    <script src="{{asset(config('view.frontend.wap_login').'/js/pull-loading.js')}}"></script>
    <script>
         var user_id = parseInt("{{$user_id}}");

        pullLoading.tpl = '<li class="bg-fff">\n' +
            '<div class="dingdan-list-header">订单编号：{%order_sn%} <span class="fa fa-angle-right"></span> <span class="mui-pull-right mui-text-{%color%}">{%status_text%}</span></div>' +
            '{%goods_item%}<div class="mui-text-right"></div>\n' +
            '<div class="mui-text-right1">{%opt_btn%}</div>\n' +
            '</li>';

        pullLoading.load(function (data) {
            var goodsItemTpl = '<div class="flex"><img src="{%goods_img%}" alt="" />' +
                '<div class="flex-right" style="width: 100%;">' +
                '<div class="flex"><div class="mui-ellipsis-2">打款人：{%goods_name%}</div></div>\n' +
                '<div><div style="padding-left: 10px;color: #999;">打款人微信：{%goods_wechat%}</div>\n' +
                '<div style="padding-left: 10px;color: #999;">打款人电话：{%goods_mobile%}</div>\n' +
                '<div style="padding-left: 10px"><span style="margin-right: 50px;">￥{%goods_price%}</span></div>\n' +
                '</div></div></div>';
            var statusText = {
                        "0":{"text":"待打款","color":"red"},
                        "1":{"text":"已打款","color":"blue"},
                        "2":{"text":"已审核","color":"green"},
                        "3":{"text":"已拒绝","color":"green"}
                };
            var len = data.length;
            for (var i=0; i<len; i++){
                var opt_btn = '';
                switch (data[i]['status']) {
                    case 0:
                        if(user_id == data[i]['user_id']){
                            opt_btn = '<a href="{{route('f_Wap_Upgrade_apply_match_pay',['order_id'=>-100])}}" class="mui-btn">立即付款</a>';
                        }else{
                            opt_btn = '<a href="javascript:void (0)" class="mui-btn mui-disabled">未付款</a>' ;
                        }
                        break;
                    case 1:
                        if(data[i]['hand_uid'] == user_id){
                            opt_btn=' <a href="javascript:;" data-url="{{route('f_Wap_Upgrade_handle',['order_id'=>-100,'status'=>2])}}"class="mui-btn quxiao" style="background-color: green;color: #ffffff;">通过</a>'+
                                      ' <a href="javascript:;" data-url="{{route('f_Wap_Upgrade_handle',['order_id'=>-100,'status'=>3])}}"class="mui-btn quxiao">拒绝</a>';
                        }else{
                            opt_btn =  '<a href="javascript:void (0)" class="mui-btn quxiao mui-disabled">已付款</a>';
                        }

                        opt_btn += '<a href="javascript:;" data-content="'+data[i]['remark']+'"  data-img="'+data[i]['voucher']+'" class="mui-btn tixing">收款凭证</a>';
                        break;
                    case 2:
                        opt_btn = '<a href="javascript:;" data-content="'+data[i]['remark']+'"  data-img="'+data[i]['voucher']+'" class="mui-btn tixing">收款凭证</a>';
                        break;
                }

                opt_btn = opt_btn.replace(/-100/g,data[i]['id']);

                var ApplyUserInfo = data[i]['apply_user_info'];
                var ApplyUser = data[i]['apply_user'];

                var goodsItem = '';

                    goodsItem += goodsItemTpl.replace('{%goods_img%}',ApplyUserInfo['receiving_code'])
                        .replace('{%goods_name%}',ApplyUser['real_name'])
                        .replace('{%goods_wechat%}',ApplyUserInfo['weichat'])
                        .replace('{%goods_price%}',data[i]['pay_money'])
                        .replace('{%goods_mobile%}',ApplyUser['user_phone']);

                var itemTpl =pullLoading.tpl;

                itemTpl = itemTpl.replace('{%order_sn%}',data[i]['agent_sn'])
                    .replace('{%status_text%}',statusText[data[i]['status']]['text'])
                    .replace('{%color%}',statusText[data[i]['status']]['color'])
                    .replace('{%goods_item%}',goodsItem)
                    .replace('{%opt_btn%}',opt_btn);

                $("#pull-load").append(itemTpl);
                orderOpt();
            }
        })
    </script>
@endpush